<template>
  <div class="cooperation">
    <banner module="cooperation"/>
    <vtitle name="为什么选择和财咖合作？" class="title" />
    <div class="home-content flex flex-wrap flex-space center cooperation-list">
      <div v-for="(item,index) in list" :key="index" class="box wow fadeInUp" :data-wow-delay="`${index/4}s`">
        <span class="list-icon"></span>
        <p v-html="item.contentTitle" class="item-content-title"></p>
        <p v-for="(c,i) in item.text.split('|')" v-html="c" class="item-text" :key="i"></p>
      </div>
    </div>
    <div class="step-two">
      <vtitle name="合作流程" class="title" />
      <div class="hidden-wap setp-box">
        <img src="@/assets/img/cooperation/line.png" alt style="width: 100%;" class="wow fadeIn">
        <div class="full-box">
          <div class="flex flex-space">
            <div v-for="(item,index) in 4" :key="index"  class="box wow fadeInUp" :data-wow-delay="`${index/4}s`">
              <span class="icon"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden-pc step-box">
        <img src="@/assets/img/cooperation/line-wap.png" alt style="width: 100%;" class="wow fadeIn">
        <div class="full-box">
          <div class="flex flex-space">
            <div v-for="(item,index) in 4" :key="index"  class="box wow fadeInUp" :data-wow-delay="`${index/4}s`" >
              <span class="icon"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="step-three">
      <vtitle name="合作支持" class="title" />
      <div class="flex-three-box flex flex-space center">
        <div v-for="(item,index) in list1" :key="index" class="box wow fadeInUp" :data-wow-delay="`${index/4}s`">
          <p v-html="item.contentTitle" class="item-content-title"></p>
          <div class="flex flex-wrap flex-center">
            <div>
              <p v-for="(c,i) in item.text.split('|')" v-html="c" class="item-text" :key="i"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="step-four">
      <vtitle name="我要合作" class="need-title" />
      <div class="step-content">
        <input type="text" placeholder="姓名"   class="wow fadeInUp" data-wow-delay="0s">
        <input type="text" placeholder="地址"  class="wow fadeInUp" data-wow-delay="0.5s">
        <input type="text" placeholder="公司名字"  class="wow fadeInUp" data-wow-delay="1s">
        <input type="text" placeholder="电话号"  class="wow fadeInUp" data-wow-delay="1.5s">
        <div class="wow fadeInUp center center-btn" data-wow-delay="2s">
          <span @click="submit" style="cursor: pointer">提交</span>
        </div>
      </div>
    </div>
    <!--dialog-->
    <transition-group name="fade">
      <div class="dialog flex flex-center flex-wrap " key="dialog" v-show="showDialog">
        <img src="@/assets/img/cooperation/success.png" alt="" class="success-img">
        <div>
          <p>您的信息已提交，我们的商务经理会</p>
          <p>在24小时之内联系您，非常感谢！</p>
        </div>
        <img src="@/assets/img/cooperation/close.png" alt="" class="right-close" @click="submit">
      </div>
    </transition-group>
  </div>
</template>

<script>
import banner from "@/components/banner-top";
import vtitle from "@/components/title";
import wowInit from '@/mixins/wowInit'

export default {
  data() {
    return {
      showDialog:false,
      canvasLoad: false,
      list: [
        {
          contentTitle: "极强吸引力",
          text: "50%的成本|给客户带来200%的效果"
        },
        {
          contentTitle: "省心＋省力",
          text: "后续技术与服务支持|均由财咖提供"
        },
        {
          contentTitle: "专业的团队",
          text: "服务质量极高|多行业标杆企业的共同选择"
        },
        {
          contentTitle: "持续的收益",
          text: "续约率高达99%|每年可持续获益"
        },
        {
          contentTitle: "有效的支撑",
          text: "全方位培训＋技术服务支持|＋宣传支持"
        }
      ],
      list1: [
        {
          contentTitle: "培训支持",
          text: "服务、产品和|销售专业知识培训"
        },
        {
          contentTitle: "技术与服务支持",
          text: "智能托管服务和|智能财税软件问题实时解答"
        },
        {
          contentTitle: "宣传支持",
          text: "品牌宣传与推广|线上线下宣传支持"
        }
      ],
      activeIndex: 0
    };
  },
  mixins:[wowInit],
  components: {
    vtitle,
    banner
  },
  methods:{
    submit(){
      this.showDialog = !this.showDialog
    }
  }
};
</script>

<style lang="less" scoped>
  .dialog{
    width: 290px;
    position:fixed;
    left: 50%;
    margin-left: -145px;
    top:50%;
    transform: translateY(-50%);
    background: white;
    text-align: center;
    padding: 30px 0;
    .success-img{
      width: 50px;
    }
    div{
      width:100%;
      margin-top: 15px;
      color: #444;
      font-size: 15px;
      line-height: 20px;
    }
    .right-close{
      position: absolute;
      right: 10px;
      top:10px;
      cursor: pointer;
    }
  }
.add-btn {
  cursor: pointer;
  margin-top: 10px;
}
.full-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.step-two {
  background: #ededed;
}
.step-content {
  input {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    padding-left: 20px;
    outline: none;
    border: none;
    margin-bottom: 10px;
    color: white;
  }
  .center-btn {
    padding-top: 10px;
    span {
      display: inline-block;
      background: #3478c9;
      color: white;
      padding: 10px 20px;
      border-radius: 2px;
    }
  }
}
</style>
<style lang="less">
.need-title {
  &.title {
    span {
      color: white;
      border-bottom: none;
      padding-bottom: 10px;
      &::after {
        background: transparent;
      }
    }
    .add-btn {
      cursor: pointer;
      margin-top: 0;
    }
  }
}
</style>